/**
 * 
 * 
 */

 import React from "react"
 import { View, Text, TextInput } from "react-native"
 import Mask from "~/components/mask"

 class MaskViewDemo extends React.Component {
  static navigationOptions = () => {
    
    return {
      title: 'Mask view'
    }
  }

  constructor(options) {
    super(options)
    this.state = {
      masked: true
    }
  }

  render() {

    return (
      <View style={{ flex: 1, height: "100%", justifyContent: "center", alignItems: "center" }}>
        <Text>Good Mask Checker Now</Text>
        <Text>Good Mask Checker Now</Text>
        <Text>Good Mask Checker Now</Text>
        <Text>Good Mask Checker Now</Text>
        <Text>Good Mask Checker Now</Text>
        <Text>Good Mask Checker Now</Text>
        <Mask>
          <Text style={{ fontSize: 50, color: "#fff" }}>Loading...</Text>
        </Mask>
      </View>
    )
  }

  renderLocalMask() {

    return (
      <View style={{ position: "absolute", height: "100%", width: "100%" , top: 0, left: 0, backgroundColor: "#000", opacity: .3 }}>
        <View style={{ flex: 1, height: "100%", justifyContent: "center", alignItems: "center" }}>
          <Text style={{ fontSize: 50 , color: "#fff" }}>Loading...</Text>
        </View>
      </View>
    )
  }

  componentDidMount() {
    let self = this

    setTimeout(function() {
      self.setState({ masked: false })
    }, 5000)
  }
 }

 export default MaskViewDemo